import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    TextInput
} from 'react-native';
import {Toast,ModalIndicator} from 'teaset';
import Utils from'../../common/Utils'
import Config from '../../common/Config'
const STORAGE_KEY_TOKEN = '@AsyncStorageDemo:key_token';
const {height, width} = Dimensions.get('window');
export default class FriendVerificationPage extends Component {
    componentDidMount() {
        this._loadInitialState().done();
    }
    async _loadInitialState(){
        try{
            let value=await AsyncStorage.getItem(STORAGE_KEY_TOKEN);
            if(value!==null){
                this._appendMessage(value);
            }else{
                this._appendMessage('');
            }
        }catch(error){
            this._appendMessage('AsyncStorage错误'+error.message);
        }
    }
    _appendMessage=(message)=>{
        this.setState({
            token:this.state.token.concat(message)
        },()=>this.getInfo());
    };
    getInfo=()=>{
        let params={
            "token":this.state.token,
        };
        ModalIndicator.show("正在请求数据......");
        fetch(Config.baseApi+'/user/getInfo',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status!==1){
                    this.setState({
                        msg:'我是'+responseJson.data.nickname
                    })
                }else{
                    Toast.message(responseJson.msg);
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };
    constructor(props) {
        super(props);
        this.state = {
            msg:'',
            token:'',
            label:'',
            phone:'',
            name:''
        }
    };

    verification=()=>{
        this.setState({
            msg:''
        })
    };

    upLoad=()=>{
        if(this.props.data===null){
            this.setState({
                label:'',
                phone:'',
                name:''
            })
        }else {
            if(this.props.data.label){
                this.setState({
                    label:this.props.data.label,
                })
            }
            if(this.props.data.phone){
                this.setState({
                    phone:this.props.data.phone,
                })
            }
            if(this.props.data.name){
                this.setState({
                    name:this.props.data.name
                })
            }
        }
        let params={
            "token":this.state.token,
            "coverId":this.props.id,
            "msg":this.state.msg,
            "label":this.state.label,
            "phone":this.state.phone,
            "name":this.state.name
        };
        ModalIndicator.show("正在请求数据......");
        fetch(Config.baseApi+'/directories/frindenRequest',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status!==1){

                }else{
                    Toast.message(responseJson.msg);
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <TouchableOpacity
                        onPress={()=>Actions.pop()}
                        style={styles.goBackView}>
                        <Text style={{ textAlign:'center',
                            fontSize:17,
                            color:'#ffffff',}}>取消</Text>
                    </TouchableOpacity>
                    <Text style={[styles.titleMsg,{color:'#ffffff'}]}>朋友验证</Text>
                    <TouchableOpacity
                        onPress={()=>this.upLoad()}
                        style={styles.completeView}>
                        <Text style={styles.titleMsg}>发送</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.iconView}>
                    <Text style={styles.iconMsg}>你需要发送验证申请，等对方通过</Text>
                </View>
                <View style={styles.areaView}>
                    <TextInput
                        ref={ (ref)=>this.phoneTextInput = ref }
                        autoCapitalize={"none"}
                        style={{flex:1,paddingLeft:15,fontSize:14}}
                        keyboardType={"numeric"}
                        defaultValue={this.state.msg}
                        placeholder="添加你的申请理由"
                        autoFocus={true}
                        placeholderTextColor='#b2b2b2'
                        autoCorrect={false}
                        onChangeText={(text)=>{
                            this.setState({
                                msg:text,
                            });
                        }}/>
                    <TouchableOpacity
                        onPress={()=>this.verification()}
                        style={{position: 'absolute', right:15,}}>
                        <Image
                            style={{height:17,width:17}}
                            source={ImageUtil.Delete}/>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        backgroundColor:'#000000',
        width:width,
        alignItems:'center',
        justifyContent:'center',
        height:64
    },
    titleMsg:{
        textAlign:'center',
        fontSize:17,
        color:'#3090dd',
        marginTop:34,
        marginBottom:29/2
    },
    goBackView:{
        position: 'absolute',
        top:65/2,left:15,
    },
    goBackImg:{
        height:18,
        width:18
    },
    completeView:{
        position: 'absolute',
        right:15,bottom:0
    },
    iconView:{
        height:40,
        width:width,
        justifyContent:'center',
    },
    iconMsg:{
        marginLeft:15,
        color:'#b2b2b2',
        fontSize:14
    },
    areaView:{
        flexDirection:'row',
        height:46,
        borderTopWidth:1,
        borderBottomWidth:1,
        borderColor:'#e3e3e4',
        alignItems:'center',
        backgroundColor:'#ffffff'
    },
});
